<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<p style="text-align: center;">
    <input type="button" id="jumpBefore" onclick="jumpBefore()" value="跳到上一个"/>
    <input type="text" id="index"/>
    <input type="text" id="code"/>
    <input type="button" id="jumpNext" onclick="jumpNext()" value="跳到下一个"/>
</p>
<div id="container" style="height: 80%"></div>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var option;

    const upColor = '#ec0000';
    const downColor = '#00da3c';
    const requestUrl = "/api/stock/chart/getStockLimitUpLineData";
    var begin = "";
    var end = "";
    var stockData;

    function getUrlParam(code) {
        const url = new URL(window.location.href);
        const params = new URLSearchParams(url.search);
        return params.get(code);
    }

    function splitData(rawData) {

        let stockDates = [];
        let values = [];
        let volumes = [];
        let marks = [];
        for (let i = 0; i < rawData.length; i++) {
            var data = rawData[i];
            if (i == 0) {
                begin = data.stockDate;
            }
            end = data.stockDate;
            stockDates.push(data.stockDate);
            values.push(data.value);
            volumes.push([i, data.volume, data.upOrDown == 'y' ? 1 : -1]);
            if (data.mark) {
                var yPosition = data.data.closePrice * 1.03.toFixed(2);
                marks.push({coord: [i, yPosition], value: data.mark});
            }

        }
        return {
            data: rawData,
            stockDates: stockDates,
            values: values,
            volumes: volumes,
            marks: marks
        };
    }

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data.values[i - j][1];
            }
            result.push(+(sum / dayCount).toFixed(3));
        }
        return result;
    }


    var index = parseInt(getUrlParam("index"));
    const strategy = getUrlParam("strategy");
    const period = getUrlParam("period");
    const sort = getUrlParam("sort");
    const code = getUrlParam("code");

    $("#index").val(index);
    var url = getRequestUrl();
    loadChart(url);

    function getRequestUrl() {
        var url = requestUrl + "?strategy=" + strategy + "&index=" + index;
        if (period) {
            url += "&period=" + period;
        }
        if (sort) {
            url += "&sort=" + sort;
        }
        if (code) {
            url += "&code=" + code;
        }
        return url;
    }

    function loadChart(url) {

        $.get(url, function (rawData) {
            //设置股票代码
            var code = rawData[0].code;
            $("#code").val(code);
            //解析图表
            var data = splitData(rawData);
            // console.log(JSON.stringify(data.values));
            stockData = rawData;
            console.log(stockData);
            myChart.setOption(
                (option = {
                    animation: false,
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['涨跌幅', 'MA5', 'MA10', 'MA13', 'MA20', 'MA30', 'MA60']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        },
                        // position: function (pos, params, el, elRect, size) {
                        //     const obj = {
                        //         top: 10
                        //     };
                        //     // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                        //     return obj;
                        // },
                        formatter: function (params) {
                             console.log(params);
                            var param = params[0];
                            // var yesterdayData = stockData.values[param.value[0] - 1];
                            // var yesterdayPrice = yesterdayData ? yesterdayData[1] : param.value[1];
                            // var rate = (param.value[2] - yesterdayPrice) * 100 / yesterdayPrice;
                            var rate = stockData[param.value[0]].rate;
                            rate = rate.toFixed(2);
                            return param.name + '<br>' +
                                '开盘:' + param.value[1] + '<br>' +
                                '收盘:' + param.value[2] + '<br>' +
                                '最低:' + param.value[3] + '<br>' +
                                '最高:' + param.value[4] + '<br>' +
                                '成交量:' + param.value[5] + '<br>' +
                                '涨跌幅%:' + rate + '<br>' +
                                'MA5:' + params[1].value + '<br>' +
                                'MA10:' + params[2].value + '<br>' +
                                'MA13:' + params[3].value + '<br>' +
                                'MA20:' + params[4].value + '<br>' +
                                'MA30:' + params[5].value + '<br>' +
                                'MA60:' + params[6].value + '<br>';
                        },
                        // extraCssText: 'width: 170px'
                    },
                    axisPointer: {
                        link: [
                            {
                                xAxisIndex: 'all'
                            }
                        ],
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            brush: {
                                type: ['lineX', 'clear']
                            }
                        }
                    },
                    brush: {
                        xAxisIndex: 'all',
                        brushLink: 'all',
                        outOfBrush: {
                            colorAlpha: 0.1
                        }
                    },
                    visualMap: {
                        show: false,
                        seriesIndex: 6,
                        dimension: 2,
                        pieces: [
                            {
                                value: 1,
                                color: upColor
                            },
                            {
                                value: -1,
                                color: downColor
                            }
                        ]
                    },
                    grid: [
                        {
                            left: '10%',
                            right: '8%',
                            height: '50%'
                        },
                        {
                            left: '10%',
                            right: '8%',
                            top: '63%',
                            height: '16%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: data.stockDates,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            min: 'dataMin',
                            max: 'dataMax',
                            axisPointer: {
                                z: 100
                            }
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: data.stockDates,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false},
                            min: 'dataMin',
                            max: 'dataMax'
                        }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                            axisLabel: {show: false},
                            axisLine: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false}
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            xAxisIndex: [0, 1],
                            start: 0,
                            end: 100
                        },
                        {
                            show: true,
                            xAxisIndex: [0, 1],
                            type: 'slider',
                            top: '85%',
                            start: 0,
                            end: 100
                        }
                    ],
                    series: [

                        {
                            name: '涨跌幅',
                            type: 'candlestick',
                            data: data.values,
                            itemStyle: {
                                color: upColor,
                                color0: downColor,
                                borderColor: undefined,
                                borderColor0: undefined
                            },
                            markPoint: {
                                symbolSize: 30,
                                data: data.marks
                            }

                        },
                        {
                            name: 'MA5',
                            type: 'line',
                            data: calculateMA(5, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#ff0000'

                            }
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            data: calculateMA(10, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#ff8000'
                            }
                        },
                        {
                            name: 'MA13',
                            type: 'line',
                            data: calculateMA(13, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#ffff00'
                            }
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            data: calculateMA(20, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#00ff00'
                            }
                        },
                        {
                            name: 'MA30',
                            type: 'line',
                            data: calculateMA(30, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#0066ff'
                            }
                        },
                        {
                            name: 'MA60',
                            type: 'line',
                            data: calculateMA(60, data),
                            smooth: true,
                            symbol: 'none',
                            lineStyle: {
                                opacity: 0.8,
                                color: '#cc33ff'
                            }
                        },
                        {
                            name: '成交量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: data.volumes
                        }
                    ]
                }),
                true
            );
            myChart.dispatchAction({
                type: 'brush',
                areas: [
                    {
                        brushType: 'lineX',
                        coordRange: [begin, end],
                        xAxisIndex: 0
                    }
                ]
            });
        });
    }

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

    function jumpNext() {
        index = index + 1;
        var url = getRequestUrl();
        $("#index").val(index);
        loadChart(url);
    }

    function jumpBefore() {
        index = index - 1;
        var url = getRequestUrl();
        $("#index").val(index);
        loadChart(url);
    }

</script>
</body>
</html>